import React, { Fragment } from 'react';
import { Row, Col, Form, Table } from 'antd';
import { get as getPath } from 'object-path';
import { QuickForm } from 'vv-frontend-components';
import { formatMessage } from 'umi';
import { connect } from 'umi';
// import moment from 'moment';
import LinkTo from '@/components/LinkTo';
// import DateRange from '@/components/DateRange';
// import { CompanyDepart } from '@/containers';
import { Pagination } from '@/components';
import style from './reportRank.less';

class Abnormal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            typeCode: '',
            sorters: ''
        };
    }

    componentDidMount() {
        this.fetchList();
    }

    handleSubmit = async e => {
        const {
            dispatch,
            reportRank: { paginationAbnormal }
        } = this.props;
        e.preventDefault();
        await dispatch({
            type: 'reportRank/save',
            payload: {
                paginationAbnormal: {
                    ...paginationAbnormal,
                    current: 1
                }
            }
        });
        this.fetchList();
    };

    // 获取列表
    fetchList = () => {
        const { form, reportRank, dispatch } = this.props;
        const { typeCode } = this.state;
        const { paginationAbnormal } = reportRank;
        const {
            companyDepart,
            date = { range: [] }
            // userName
        } = form.getFieldsValue();
        dispatch({
            type: 'reportRank/fetchAbnorRank',
            payload: {
                companyCode: companyDepart?.companyId || '',
                departmentCode: companyDepart?.departmentId || '',
                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                pageNo: paginationAbnormal.current,
                pageSize: paginationAbnormal.pageSize,
                isLookMore: '2',
                typeCode
            }
        });
    };

    // 表格表头点击切换排序
    changeTable = async (pagination, filters, sorter) => {
        const { sorters } = this.state;

        let sorterField;
        if (sorter && sorter.field && sorter.order) {
            if (sorter.field === 'lates') {
                sorterField = '1';
            }
            if (sorter.field === 'earlyLeave') {
                sorterField = '2';
            }
            if (sorter.field === 'repalceCard') {
                sorterField = '3';
            }
            if (sorter.field === 'repalceDuty') {
                sorterField = '4';
            }
            if (sorter.field === 'allAbrom') {
                sorterField = '';
            }
            this.setState({
                typeCode: sorterField
            });
        } else {
            this.setState({
                typeCode: ''
            });
        }
        const {
            dispatch,
            reportRank: { paginationAbnormal: curPagination }
        } = this.props;
        await dispatch({
            type: 'reportRank/save',
            payload: {
                paginationAbnormal: {
                    ...curPagination,
                    ...pagination
                }
            }
        });
        if (sorter && sorters !== sorter) {
            this.setState({
                sorters: sorter
            });
            await dispatch({
                type: 'reportRank/save',
                payload: {
                    paginationAbnormal: {
                        current: 1,
                        pageSize: curPagination.pageSize
                    }
                }
            });
        }

        this.fetchList();
    };

    render() {
        const { loading, reportRank, form } = this.props;
        const { abnormalData, paginationAbnormal } = reportRank;
        // const { locale } = new Locale('stat.report');

        const columnsAbnormal = [
            {
                dataIndex: 'id',
                key: 'id',
                render: (text, record, index) => (
                    <p
                        className={
                            index + paginationAbnormal.pageSize * (paginationAbnormal.current - 1) < 5
                                ? style.wnP
                                : style.wnOther
                        }
                    >
                        {index + paginationAbnormal.pageSize * (paginationAbnormal.current - 1) + 1}
                    </p>
                )
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.userName'
                })}`,
                dataIndex: 'userName',
                key: 'userName',
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/abnormalRank"
                            query={{
                                key: 'latelist',
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.userName}
                        </LinkTo>
                    );
                }
            },
            {
                title: `${formatMessage({
                    id: 'stat.absenceList.departName'
                })}`,
                dataIndex: 'departName',
                key: 'departName',
                width: 150
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.position'
                })}`,
                dataIndex: 'position',
                key: 'position',
                width: 200
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.allAbrom'
                })}`,
                dataIndex: 'allAbrom',
                key: 'allAbrom',
                width: 100,
                render: (text, record) => <span>{record.allAbrom}次</span>,
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.lates'
                })}`,
                dataIndex: 'lates',
                key: 'lates',
                width: 100,
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/abnormalRank/latelist"
                            query={{
                                key: 'latelist',
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                // dateType: date.type,
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.lates}次
                        </LinkTo>
                    );
                },
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.earlyLeave'
                })}`,
                dataIndex: 'earlyLeave',
                key: 'earlyLeave',
                width: 100,
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/abnormalRank/latelist"
                            query={{
                                key: 'latelist',
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                dateType: '',
                                // dateType: date.type,
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.earlyLeave}次
                        </LinkTo>
                    );
                },
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.repalceCard'
                })}`,
                dataIndex: 'repalceCard',
                key: 'repalceCard',
                width: 100,
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/abnormalRank"
                            query={{
                                key: 'misslist',
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                startTime: date.range[0],
                                endTime: date.range[1],
                                // dateType: date.type,
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.repalceCard}次
                        </LinkTo>
                    );
                },
                sorter: () => {}
            },
            {
                title: `${formatMessage({
                    id: 'stat.report.repalceDuty'
                })}`,
                dataIndex: 'repalceDuty',
                key: 'repalceDuty',
                width: 100,
                render: (text, record) => {
                    // const { form } = this.props;
                    const { companyDepart, date = { range: [] } } = form.getFieldsValue();
                    return (
                        <LinkTo
                            to="/office/personnelManagement/attendance/timetag/abnormalRank/absencelist"
                            query={{
                                key: 'absencelist',
                                companyCode: companyDepart?.companyId || '',
                                departmentCode: companyDepart?.departmentId || '',
                                employeeName: record.userName,
                                startTime: date.range[0] ? date.range[0].format('YYYY-MM-DD') : '',
                                endTime: date.range[1] ? date.range[1].format('YYYY-MM-DD') : '',
                                // dateType: date.type,
                                dateType: '',
                                quarter: date?.type === 'quarter' ? date.quarter || 1 : ''
                            }}
                        >
                            {record.repalceDuty}次
                        </LinkTo>
                    );
                },
                sorter: () => {}
            }
        ];

        return (
            <Fragment>
                {/* 考勤异常排行 */}
                <Row type="flex" className="searchTitle">
                    <Col>
                        <Form layout="inline" onSubmit={this.handleSubmit}>
                            <QuickForm form={form} config={getPath(this.props, 'config')} />
                        </Form>
                    </Col>
                </Row>
                <Table
                    style={{ marginTop: '12px' }}
                    dataSource={abnormalData}
                    columns={columnsAbnormal}
                    loading={loading}
                    rowKey="id"
                    onChange={this.changeTable}
                    className={style.wn_noAsc}
                    pagination={false}
                />
                <Pagination onChange={this.changeTable} {...paginationAbnormal} loading={loading} />
            </Fragment>
        );
    }
}

export default connect(({ reportRank, loading }) => ({
    reportRank,
    loading: loading.models.reportRank
}))(Form.create()(Abnormal));
